<template>
	<view class="content">
		<popup-active :visible.sync="showHonor" :popScreenList="popScreenList" @toPage="toPage"></popup-active>
		<view class="care" @click.stop="careHeHuoRen">
			<image :src="`//mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/img/heart_${beautifulDiary.likeType === 1 ? 'fill' : 'empty'}.png`" alt="" />
			<text class="font24 color8a8c8d fr paddingR16">{{ beautifulDiary.likeNumber || 0 }}</text>
		</view>
		<image class="diaryImg" :src="beautifulDiary.imgUrl" mode="widthFix" aspectFit></image>
		<p class="title">{{ beautifulDiary.diaryContent || '' }}</p>
		<view style="position: relative;margin-bottom: 32rpx;">
			<p class="name">{{ beautifulDiary.userName || '' }}</p>
			<p class="time">{{ beautifulDiary.createTime || '' }}</p>
			<view v-if="beautifulDiary.canDelete === '1'" class="remove" @click="deleteDiary(beautifulDiary.cusDiaryId)"></view>
		</view>
		
		<uni-popup ref="popup" type="center" class="wrap">
			<view class="chat">
				<view class="tit">提示</view>
				<view class="sureDetele">确认删除？</view>
				<view class="btn">
					<view class="cancel" @click="cancel()">取消</view>
					<view class="line"></view>
					<view class="sure" @click="sure()">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import http from '@/common/request.js';
import { getCommonShareInfo } from '@/common/utils.js';
import popupActive from '@/components/popup-activity/popup-activity.vue';
export default {
	onShareAppMessage() {
		return getCommonShareInfo();
	},
	onLoad: function(option) {
		this.id = option.cusDiaryId;
		this.from = option.from;
		this.eventChannel = this.getOpenerEventChannel();
	},
	components: {
		popupActive
	},
	data() {
		return {
			id: '',
			from: '',
			beautifulDiary: {},
			popScreenList: [],
			showHonor: false,
			beautifulDiaryId: ''
		};
	},
	mounted() {
		http('/api/cusBeautifulDiary/' + this.id, { method: 'GET' }).then(result => {
			this.beautifulDiary = result.data;
		});
	},
	methods: {
		toPage(value) {
			http('/api/duiba/getNoLoginUrl?credits=0&redirect=' + value, { method: 'GET' }).then(result => {
				if (result.code == 200) {
					// #ifdef H5
					location.href = result.data;
					// #endif
					// #ifdef MP-WEIXIN
					uni.navigateTo({
						url: '../../../home/web_view?url=' + encodeURIComponent(result.data),
						animationType: 'pop-in',
						animationDuration: 200
					});
					//#endif
				}
			});
		},
		
		
		
		deleteDiary(id) {
			this.$refs.popup.open();
			this.beautifulDiaryId = id
			// uni.showModal({
			// 	title: '提示',
			// 	content: '确认删除？',
			// 	cancelColor: '#66645D',
			// 	confirmColor: '#f39800',
			// 	success: res => {
			// 		if (res.confirm) {
			// 			http(`api/cusBeautifulDiary/deleteSelfDiary/${id}`, { method: 'DELETE' }).then(result => {
			// 				uni.showToast({
			// 					title: result.msg,
			// 					icon: 'none'
			// 				});
			// 				this.eventChannel.emit('updateDeleteDiray', true);
			// 				setTimeout(r => {
			// 					uni.navigateBack({
			// 						delta: 1
			// 					});
			// 				}, 1000);
			// 			});
			// 		}
			// 	}
			// });
		},
		sure() {
			http(`api/cusBeautifulDiary/deleteSelfDiary/${this.beautifulDiaryId}`, { method: 'DELETE' }).then(result => {
				uni.showToast({
					title: result.msg,
					icon: 'none'
				});
				this.$refs.popup.close();
				this.eventChannel.emit('updateDeleteDiray', true);
				setTimeout(r => {
					uni.navigateBack({
						delta: 1
					});
				}, 1000);
			});
		},
		cancel() {
			this.$refs.popup.close();
		},
		careHeHuoRen() {
			const { cusDiaryId: contentId, diaryId, likeType } = this.beautifulDiary;
			let url = 'api/cusBeautifulDiary/dataIncr';
			if (likeType === 1) {
				url = 'api/cusBeautifulDiary/dataDecr';
			}
			http(url, {
				method: 'POST',
				data: {
					contentId,
					diaryId,
					diaryType: 2
				}
			}).then(result => {
				if (result.code == 200) {
					this.eventChannel.emit('updateDirayInfo', result.data.isNoThumbs);
					
					this.beautifulDiary.likeNumber = result.data.count || 0;
					this.beautifulDiary.likeType = 2 - result.data.isNoThumbs;
					
					const list = result.popScreen || [];
					if (list.length > 0) {
						this.showHonor = true;
						this.popScreenList = list;
					}
				}
			});
		}
	}
};
</script>

<style scoped lang="less">
.paddingR16 {
	color: #b2b1ae;
	font-size: 24rpx;
}
.content {
	min-height: 100vh;
	background: #ffffff;
	padding: 0 40rpx 24rpx 40rpx;
	.wrap {
		width: 100%;
		text-align: center;
		.chat {
			background: #fff;
			border-radius: 20rpx;
			width: 680rpx;
			// padding:0 48rpx;
			.tit {
				font-size: 36rpx;
				color: #66645D;
				padding-top: 42rpx;
				background: #f7f7f7;
				border-radius: 20rpx 20rpx 0 0;
			}
			.sureDetele {
				padding: 42rpx 0;
				font-size: 28rpx;
				background: #f7f7f7;
				color: #66645D;
			}
			.btn {
				height: 100rpx;
				background: #fff;
				display: flex;
				align-items: center;
				font-size: 36rpx;
				justify-content: space-around;
				border-radius: 0 0 24rpx 24rpx;
				.cancel {
					color: rgba(138, 140, 141, 1);
					width: 49.5%;
				}
				.line {
					height: 70rpx;
					width:1px;
					background: rgba(138, 140, 141, 0.1);
				}
				.sure {
					color: #F39800;
					width: 49.5%;
				}
			}
		}
		
	}

	.diaryImg {
		width: 100%;
		margin: 0 auto;
		border-radius: 20rpx;
		display: block;
		margin-bottom: 40rpx;
	}
	.title {
		font-size: 28rpx;
		font-weight: 300;
		color: rgba(138, 140, 141, 1);
		line-height: 46rpx;
		margin-bottom: 36rpx;
	}

	.name {
		font-size: 28rpx;
		font-weight: 400;
		color: rgba(102, 100, 93, 1);
		line-height: 40rpx;
		margin-bottom: 4rpx;
	}
	.time {
		font-size: 24rpx;
		font-weight: 300;
		color: rgba(138, 140, 141, 1);
		line-height: 33rpx;
	}
}

.care {
	display: inline-flex;
	justify-content: flex-end;
	align-items: center;
	float: right;
	padding: 28rpx 0 28rpx 28rpx;

	image {
		width: 28rpx;
		height: 26rpx;
		margin-right: 12rpx;
	}
}

.remove {
	position: absolute;
	padding: 28rpx;
	right: 0;
	bottom: 0;
	height: 78rpx;
	width: 78rpx;
	background: url(https://mall-rongchuang.oss-cn-beijing.aliyuncs.com/guixin_miniProgram/img/delete.png) center center no-repeat;
	background-size: 30rpx 30rpx;
}
/deep/.modal-mask {
	background: #f0f !important;
}
/deep/.modal-dialog {
	background: #0f0 !important;
}
/deep/.modal-content {
	color: #00f !important;
}

</style>
